<template>
	<n-modal v-model:show="showPlay" class="dialog" @after-leave="closePlay">
		<div class="video-player">
			<div class="video-player-title">
				<div class="video-player-title-text">预览</div>
				<n-icon class="video-player-title-icon" size="30" @click.stop="closePlay"><Close /></n-icon>
			</div>
			<video style="width: 800px; max-height: 90vh" :src="videoUrl" controls autoplay />
		</div>
	</n-modal>
</template>

<script>
import { ref, watch } from 'vue';
import { Close, Eye } from '@vicons/ionicons5';

export default {
	name: 'DYFXPlay',
	// eslint-disable-next-line vue/no-unused-components
	components: { Close, Eye },
	props: {
		videoUrl: {
			type: String,
			default: ''
		}
	},
	setup() {},
	data() {
		return {
			showPlay: false
		};
	},
	methods: {
		openPlay() {
			this.showPlay = true;
		},
		closePlay() {
			this.showPlay = false;
		}
	}
};
</script>

<style lang="less" scoped>
.video-player {
	background-color: white;
	width: 700px;
	position: relative;
	&-title {
		display: flex;
		align-items: center;
		font-size: 18px;
		margin-left: 10px;
		&-icon {
			position: absolute;
			right: 0;
			flex-direction: row-reverse;
			z-index: 2;
			cursor: pointer;
		}
	}
}
</style>
